<!-- Bookmarks Bar-->
<div
  class="bookmarksBar"
  [style.fontSize]="getBookmarkSize(settings.config.bookmarks.bookmarksBar.scaling)"
  *ngIf="settings.config.bookmarks.bookmarksBar.enabled">

  <div class="bar">
    <!-- Scroll left button -->
    <button
      class="barScroll"
      (click)="moveLeft(barList)"
      *ngIf="!isScrollAtStart(barList)">
      <i class="barIcon icon">arrow_back_ios</i>
    </button>
    <!-- Bar list -->
    <ul class="barList" #barList>
      <li class="barNode" *ngIf="settings.config.bookmarks.bookmarksBar.apps">
        <button title="{{'tab.bookmarks.links.apps' | translate}}" class="barFolder" (click)="apps()">
          <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" src="/assets/img/apps.png" class="barIcon">
          <div class="barLabel">{{'tab.bookmarks.links.apps' | translate}}</div>
        </button>
      </li>
      <li class="barNode" *ngIf="settings.config.bookmarks.bookmarksBar.chromeTab">
        <button title="{{'tab.bookmarks.links.chromeTab' | translate}}" class="barFolder" (click)="chromeTab()">
          <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" src="/assets/img/tab.png" class="barIcon">
          <div class="barLabel">{{'tab.bookmarks.links.chromeTab' | translate}}</div>
        </button>
      </li>
      <li class="barNode" *ngIf="settings.config.bookmarks.bookmarksBar.history">
        <button title="{{'tab.bookmarks.links.history' | translate}}" class="barFolder" (click)="history()">
          <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" src="/assets/img/history.png" class="barIcon">
          <div class="barLabel">{{'tab.bookmarks.links.history' | translate}}</div>
        </button>
      </li>
      <li class="barNode" *ngIf="settings.config.bookmarks.bookmarksBar.bookmarksManager">
        <button title="{{'tab.bookmarks.links.bookmarksManager' | translate}}" class="barFolder" (click)="bookmarksManager()">
          <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" src="/assets/img/bookmarks.png" class="barIcon">
          <div class="barLabel">{{'tab.bookmarks.links.bookmarksManager' | translate}}</div>
        </button>
      </li>
      <li class="barNode" *ngIf="settings.config.bookmarks.bookmarksBar.mostVisited">
        <button
          class="barFolder"
          title="{{'tab.bookmarks.links.mostVisited' | translate}}"
          (click)="toggleMostVisited = !toggleMostVisited">
          <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" src="/assets/img/folder.png" class="barIcon">
          <div class="barLabel">{{'tab.bookmarks.links.mostVisited' | translate}}</div>
        </button>
        <div class="bar" *ngIf="toggleMostVisited" @slideDown>
          <ng-container
            *ngTemplateOutlet="tree; context: { $implicit: allMostVisited, parent: mostVisited, idx: 0 }">
          </ng-container>
        </div>
      </li>
      <li class="barNode" *ngFor="let item of allBookmarks; let i = index">
        <ng-container *ngIf="item.url; else bookmarkFolder">
          <a
            href="{{item.url}}"
            title="{{item.title}}
{{item.url}}"
            class="barLink">
            <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" [src]="sanitizer.bypassSecurityTrustResourceUrl('chrome://favicon/size/16@2x/' + item.url)" class="barIcon">
            <div class="barLabel">{{item.title}}</div>
          </a>
        </ng-container>
        <ng-template #bookmarkFolder>
          <button
            class="barFolder"
            title="{{item.title}}"
            (click)="toggle[i] = !toggle[i];">
            <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" src="/assets/img/folder.png" class="barIcon">
            <div class="barLabel">{{item.title}}</div>
          </button>
        </ng-template>
        <div class="bar" *ngIf="item.children && toggle[i]" @slideDown>
          <ng-container
            *ngTemplateOutlet="tree; context: { $implicit: item.children, parent: item, idx: i }">
          </ng-container>
        </div>
      </li>
    </ul>
    <!-- Scroll right button -->
    <button
      class="barScroll"
      (click)="moveRight(barList)"
      *ngIf="!isScrollAtEnd(barList)">
      <i class="barIcon icon">arrow_right</i>
    </button>
  </div>

</div>

<ng-template #tree let-list let-parent="parent" let-idx="idx">
  <!-- Back button -->
  <button
    class="barTitle"
    *ngIf="parent"
    title="{{parent.title}}"
    (click)="toggle[idx] = !toggle[idx]; toggleMostVisited = false;">
    <i class="barIcon icon">keyboard_arrow_up</i>
    <div class="barLabel">{{parent.title}}</div>
  </button>
  <!-- Scroll left button -->
  <button
    class="barScroll"
    (click)="moveLeft(barList)"
    *ngIf="!isScrollAtStart(barList)">
    <i class="barIcon icon">arrow_back_ios</i>
  </button>
  <!-- Bar list -->
  <ul class="barList" #barList>
    <li class="barNode" *ngFor="let item of list; let n = index">
      <ng-container *ngIf="item.url; else bookmarkFolder">
        <a
          href="{{item.url}}"
          title="{{item.title}}
{{item.url}}"
          class="barLink">
          <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" [src]="sanitizer.bypassSecurityTrustResourceUrl('chrome://favicon/size/16@2x/' + item.url)" class="barIcon">
          <div class="barLabel">{{item.title}}</div>
        </a>
      </ng-container>
      <ng-template #bookmarkFolder>
        <button
          class="barFolder"
          title="{{item.title}}"
          (click)="toggle[idx + '.' + n] = !toggle[idx + '.' + n]">
          <img *ngIf="settings.config.bookmarks.bookmarksBar.icons" src="/assets/img/folder.png" class="barIcon">
          <div class="barLabel">{{item.title}}</div>
        </button>
      </ng-template>
      <div class="bar" *ngIf="item.children && toggle[idx + '.' + n]" @slideDown>
        <ng-container
          *ngTemplateOutlet="tree; context: { $implicit: item.children, parent: item, idx: idx + '.' + n }">
        </ng-container>
      </div>
    </li>
  </ul>
  <!-- Scroll right button -->
  <button
    class="barScroll"
    (click)="moveRight(barList)"
    *ngIf="!isScrollAtEnd(barList)">
    <i class="barIcon icon">arrow_forward_ios</i>
  </button>
</ng-template>


<!-- Quick Links -->
<div
  class="quickLinksBar"
  [style.fontSize]="shared.getFontSize(settings.config.bookmarks.quickLinks.scaling)"
  *ngIf="settings.config.bookmarks.quickLinks.enabled">
  <ul>
    <li *ngIf="settings.config.bookmarks.quickLinks.apps">
      <button title="{{'tab.bookmarks.links.apps' | translate}}" class="link" (click)="apps()">
        <img *ngIf="settings.config.bookmarks.quickLinks.icons" src="/assets/img/apps.png" class="quickLinksIcon">
        <div class="quickLinksLabel">{{'tab.bookmarks.links.apps' | translate}}</div>
      </button>
    </li>
    <li *ngIf="settings.config.bookmarks.quickLinks.chromeTab">
      <button title="{{'tab.bookmarks.links.chromeTab' | translate}}" class="link" (click)="chromeTab()">
        <img *ngIf="settings.config.bookmarks.quickLinks.icons" src="/assets/img/tab.png" class="quickLinksIcon">
        <div class="quickLinksLabel">{{'tab.bookmarks.links.chromeTab' | translate}}</div>
      </button>
    </li>
    <li *ngIf="settings.config.bookmarks.quickLinks.history">
      <button title="{{'tab.bookmarks.links.history' | translate}}" class="link" (click)="history()">
        <img *ngIf="settings.config.bookmarks.quickLinks.icons" src="/assets/img/history.png" class="quickLinksIcon">
        <div class="quickLinksLabel">{{'tab.bookmarks.links.history' | translate}}</div>
      </button>
    </li>
    <li *ngIf="settings.config.bookmarks.quickLinks.bookmarksManager">
      <button title="{{'tab.bookmarks.links.bookmarksManager' | translate}}" class="link" (click)="bookmarksManager()">
        <img *ngIf="settings.config.bookmarks.quickLinks.icons" src="/assets/img/bookmarks.png" class="quickLinksIcon">
        <div class="quickLinksLabel">{{'tab.bookmarks.links.bookmarksManager' | translate}}</div>
      </button>
    </li>
    <li class="mostVisitedLink" *ngIf="settings.config.bookmarks.quickLinks.mostVisited">
      <button title="{{'tab.bookmarks.links.mostVisited' | translate}}" class="link" (click)="toggleMvMenu = !toggleMvMenu">
        <img *ngIf="settings.config.bookmarks.quickLinks.icons" src="/assets/img/folder.png" class="quickLinksIcon">
        <div class="quickLinksLabel">{{'tab.bookmarks.links.mostVisited' | translate}}</div>
      </button>
      <div class="mostVisitedMenu" *ngIf="toggleMvMenu">
        <a
          href="{{mv.url}}"
          title="{{mv.title}}
{{mv.url}}"
          *ngFor="let mv of allMostVisited">
          <img *ngIf="settings.config.bookmarks.quickLinks.icons" [src]="sanitizer.bypassSecurityTrustResourceUrl('chrome://favicon/size/16@2x/' + mv.url)">
          <div>{{mv.title}}</div>
        </a>
      </div>
    </li>
    <li *ngFor="let item of settings.config.bookmarks.links; let i = index">
      <a href="{{item.url}}" class="link">
        <img *ngIf="settings.config.bookmarks.quickLinks.icons" [src]="sanitizer.bypassSecurityTrustResourceUrl('chrome://favicon/size/16@2x/' + item.url)" class="quickLinksIcon">
        <div class="quickLinksLabel">{{item.label}}</div>
      </a>
    </li>
  </ul>

</div>
